<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Canvas2Svg Playground</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/skeleton.css">
    <link rel="stylesheet" href="css/playground.css">
</head>
<body>
<div class="container">
    <form>
        <div class="row">
            <div class="twelve columns">
                <h5>Select an example</h5>
            </div>
        </div>
    </form>
    <form>
        <div class="row">
            <div class="twelve columns">
                <!-- select content is generated by the command `gulp update_examples` -->
                <select id="select" class="u-full-width"><option value="arc">arc</option><option value="arcTo">arcTo</option><option value="arcTo2">arcTo2</option><option value="emptyArc">emptyArc</option><option value="fillstyle">fillstyle</option><option value="globalalpha">globalalpha</option><option value="gradient">gradient</option><option value="linecap">linecap</option><option value="linewidth">linewidth</option><option value="setLineDash">setLineDash</option><option value="rgba">rgba</option><option value="saveandrestore">saveandrestore</option><option value="text">text</option><option value="tiger">tiger</option></select>
            </div>
        </div>
    </form>
    <div class="row">
        <div class="six columns">
            <h5>Canvas</h5>
        </div>
        <div class="six columns">
            <h5>SVG</h5>
        </div>
    </div>
    <div class="row">
        <div class="six columns">
            <canvas id="canvas" width="460" height="460"></canvas>
        </div>
        <div class="six columns" id="svg">
        	<canvas id="wrapped_canvas" width="460" height="460" style="display:none"></canvas>
        </div>
    </div>
    <br>
    <div class="row try">
        <div class="twelve columns">
            <h5>Or try your own!</h5>
        </div>
    </div>
    <div class="row">
        <div class="twelve columns">
            <textarea id="textarea" class="u-full-width" placeholder="//ctx.fillRect(0,0,100,100);"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="twelve columns">
            <a href="#" class="button button-primary u-pull-right" id="render">Render</a>
        </div>
    </div>
</div>
<!-- jQuery is only used for convenience on this test page, it's not a dependency for the library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="../canvas2svg.js"></script>
<script type="text/javascript">
    window.C2S_EXAMPLES = {};
</script>

<!-- examples content is generated by the command `gulp update_examples` -->
<div id="examples"><script type="text/javascript" src="example/arc.js"></script><script type="text/javascript" src="example/arcTo.js"></script><script type="text/javascript" src="example/arcTo2.js"></script><script type="text/javascript" src="example/emptyArc.js"></script><script type="text/javascript" src="example/fillstyle.js"></script><script type="text/javascript" src="example/globalalpha.js"></script><script type="text/javascript" src="example/gradient.js"></script><script type="text/javascript" src="example/linecap.js"></script><script type="text/javascript" src="example/linewidth.js"></script><script type="text/javascript" src="example/setLineDash.js"></script><script type="text/javascript" src="example/rgba.js"></script><script type="text/javascript" src="example/saveandrestore.js"></script><script type="text/javascript" src="example/text.js"></script><script type="text/javascript" src="example/tiger.js"></script></div>

<script type="text/javascript">
    (function () {
        "use strict";

        function drawExample (example) {
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, 500, 500);

            var svg = document.getElementById("svg");

            // remove the latest svg (children[0] is the wrapped canvas element)
            if (svg.children.length > 1) {
                svg.removeChild(svg.children[1]);
            }
            var otherCanvas = document.getElementById("wrapped_canvas");
            var wrappedCtx = otherCanvas.getContext("2d");
            var c2s = new C2S({ctx:wrappedCtx, width:500, height:500});

            example(ctx);
            example(c2s);

            svg.appendChild(c2s.getSvg());
        }

        $('#render').on('click', function(event) {
            event.preventDefault();
            var text = $("#textarea").val();
            var drawFunction = new Function("ctx", text);
            drawExample(drawFunction);
        });

        $('#select').on('change', function(event) {
            var example = C2S_EXAMPLES[$(this).val()];
            drawExample(example);
        }).trigger('change');

    }());
</script>
</body>
</html>